<script setup lang="ts">
import type { EChartsOption } from 'echarts'

const props = withDefaults(defineProps<{
  data?: any[]
}>(), {
  data() {
    const rand = () => Math.ceil(Math.random() * 100)
    return [
      ['1月', rand()],
      ['2月', rand()],
      ['3月', rand()],
      ['4月', rand()],
      ['5月', rand()],
      ['6月', rand()],
      ['7月', rand()],
      ['8月', rand()],
      ['9月', rand()],
      ['10月', rand()],
      ['11月', rand()],
      ['12月', rand()],
    ]
  },
})

const chartOption = computed<EChartsOption>(() => {
  return {
    title: {
      text: '报警数量变化',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    grid: {
      containLabel: true,
      left: '6%',
      right: '10%',
      top: '70px',
      bottom: '20px',
    },
    xAxis: {
      type: 'category',
      name: '月份',
    },
    yAxis: {
      type: 'value',
      name: '个',
    },
    dataset: {
      source: props.data,
    },
    series: [
      {
        type: 'line',
        smooth: true,
      },
    ],
  }
})
</script>

<template>
  <BChart :option="chartOption" />
</template>
